<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.nickName" placeholder="用户" style="width: 170px;"></el-input>
        <el-date-picker v-model="search.dateStart"  type="date"  placeholder="选择开始日期"  :picker-options="startDatePicker" style="width: 170px;margin-left:5px;"></el-date-picker>
        <el-date-picker v-model="search.dateEnd"  type="date"  placeholder="选择结束日期"  :picker-options="endDatePicker" style="width: 170px;margin-left:5px;"></el-date-picker>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="用户">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.userKind | parseUserKind }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="支付宝账号">
        <template slot-scope="scope">
          <span>{{ scope.row.aliPayAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="提现订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.cashOutNum }}</span>
        </template>
      </el-table-column>
     <el-table-column min-width="20%" align="center" label="金额">
        <template slot-scope="scope">
          <span>{{ (scope.row.money/100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%"  align="center" label="审核状态">
        <template slot-scope="scope">
            <el-tag :type="(['info','success','danger'][scope.row.checkState])" :effect="(scope.row.checkState?'dark':'light')">{{scope.row.checkState | parseCheckState}}</el-tag>
            <span></span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="审核时间">
        <template slot-scope="scope">
          <span>{{ scope.row.checkTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="审核人">
        <template slot-scope="scope">
          <span>{{ scope.row.checkUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="审核说明">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="申请时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleCheck(scope.row.id)" v-if="scope.row.checkState==0">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
    

      <el-dialog title="审核结果" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item">
            <span class="name">用户</span>
            <span class="value">
              {{dialog.data.nickName}}
            </span>
          </div>
          <div class="item">
            <span class="name">订单</span>
            <span class="value">
               {{dialog.data.cashOutNum}}
            </span>
          </div>
          <div class="item">
            <span class="name required">审核结果</span>
            <span class="value">
              <el-switch  v-model="dialog.data.result"  active-color="#13ce66"  inactive-color="#ff4949"></el-switch> {{(dialog.data.result?'通过':'拒绝')}}
            </span>
          </div>
          <div class="item">
            <span class="name required">审核密码</span>
            <span class="value">
                <el-input clearable v-model="dialog.data.code" maxlength="20" placeholder="审核密码" style="width: 200px;"></el-input>
            </span>
          </div>
          <div class="item h100" v-show="!dialog.data.result">
            <span class="name required">原因</span>
            <span class="value">
              <el-input type="textarea" clearable v-model="dialog.data.reason" maxlength="500" rows="4" placeholder="不通过简要说明" style="width: 100%;"></el-input>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="checkCashout()" :loading="dialog.saveloading">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import guid from '@/utils/guid'
import * as financeApi from '@/api/finance'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import md5 from 'js-md5';


export default {
  name: 'WithdrawaInfo',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        dateStart:'',
        dateEnd:'',
        nickName:'',
      },
      search:{
        nickName:'',
        // dateStart:parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 31),'{y}-{m}-{d}'),
        // dateEnd:parseTime(new Date(),'{y}-{m}-{d}'),
        dateStart:'',
        dateEnd:'',
      },
      dialog:{
        visible:false,
        saveloading:false,
        //数据
        data:{
          nickName:'',
          cashOutNum:'',
          code:'',
          reason:'',
          id:guid.empty,
          result:true,
        }
      },
      startDatePicker:this.startDateHandler(),
      endDatePicker:this.endDatehandler()
    }
  },
  created(){
      var that=this;
      that.searchClick();
  },
  mounted(){

  },
  filters:{
    parseSettleType(val){
       return ['','收益','提现'][val];
    },
    parseUserKind(val){
      return ['','商家','代理','荣誉校长'][val];
    },
    parseCheckState(val){
      return ['未审核','通过','不通过',''][val];
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      
      financeApi.getCashoutList(that.listQuery).then(res=>{
         if(res.data && res.data.items){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.dateStart=that.search.dateStart;
      that.listQuery.dateEnd=that.search.dateEnd;
      that.listQuery.nickName=that.search.nickName.trim();
      that.getList();
    },
    handleCheck(id){
        var that=this;
        var cashout=that.list.filter(item=>item.id==id);

        if(cashout.length==0){return;}

        that.dialog.data.id=id;
        that.dialog.data.nickName=cashout[0].nickName;
        that.dialog.data.cashOutNum=cashout[0].cashOutNum;
        that.dialog.data.reason='';
        that.dialog.visible=true;
    },
    checkCashout(){
      var that=this;
       if(!that.dialog.data.result && !that.dialog.data.reason.trim()){
           that.$message({
             message:'请填写不通过理由',
             type:'warning'
           });
           return;
       }
      if(!that.dialog.data.code.trim()){
        that.$message({
             message:'请填写效验码',
             type:'warning'
           });
           return;
      }
      var data={
        id:that.dialog.data.id,
        code:md5(md5(that.dialog.data.code)),
        result:that.dialog.data.result,
        reason:that.dialog.data.reason
      }
      that.dialog.saveloading=true;
      financeApi.checkCashout(data).then(res=>{
          if(res.data){
            that.$message({
              message:data.result?'审核成功！':'拒绝成功！',
              type:'success'
            })
          }
          setTimeout(()=>{
            that.dialog.saveloading=false;
            that.dialog.visible=false;
          })
      }).catch(()=>{
        that.dialog.saveloading=false;
      })

    },
    startDateHandler(){
        let self = this
        return {
          disabledDate(time){
           if(self.search.dateEnd){
              return new Date(self.search.dateEnd).getTime() < time.getTime() || time.getTime() > Date.now()
            }else{
              return time.getTime() > Date.now()//结束时间不选时，开始时间最大值小于等于当天
            }
          }
        }
      },
      //提出结束时间必须大于提出开始时间
    endDatehandler(){
        let self = this
        return {
          disabledDate(time){
            if(self.search.dateStart){
              return new Date(self.search.dateStart).getTime() > time.getTime() || time.getTime() > Date.now()
            }else{
              return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
    }
  }
}
</script>
<style scoped>
.moneychange{ position: relative;}
    .moneychange.green{ color:#42b983}
    .moneychange.red{ color:#f00}
    .moneychange.green::before{
        position:absolute;
        top:-3px;left:-10px; content:'+'; color:#42b983; display: inline-block; width:10px;height: 10px;
    }
    .moneychange.red::before{
        position:absolute;
        top:-3px;left:-10px; content:'-'; color:#f00; display: inline-block; width:10px;height: 10px;
    }
</style>
